<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="12">
            <a-form-item label="榜单名称">
              <!--<a-input placeholder="请输入账号查询" v-model="queryParam.username"></a-input>-->
              <j-input placeholder="输入名称模糊查询" v-model="queryParam.name"></j-input>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="8">
            <a-form-item label="榜单类型">
              <a-select v-model="queryParam.toplistType" placeholder="请选择">
                <a-select-option value="">请选择</a-select-option>

                <a-select-option value="1">巅峰榜</a-select-option>
                <a-select-option value="2">特色榜</a-select-option>
                <a-select-option value="3">全球榜</a-select-option>
                <a-select-option value="4">地区榜</a-select-option>

              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>

        </a-row>
      </a-form>
    </div>
    <!-- 查询区域 -->

    <!-- 操作按钮区域 -->
    <div class="table-operator" style="border-top: 5px">
      <a-button type="primary" icon="plus" @click="handleAdd">添加</a-button>
      <a-button type="text"  icon="delete" @click="batchDel">删除</a-button>
    </div>
    <!-- 操作按钮区域 -->

    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        size="middle"
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :scroll="{x:1000}"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange"
      >
        <!-- 字符串超长截取省略号显示-->
        <template slot="avatarslot" slot-scope="text, record, index">
          <div class="anty-img-wrap">
            <a-avatar shape="square" :src="getAvatarView(record.avatar)" icon="user"/>
          </div>
        </template>
        <span slot="action" slot-scope="text, record">

          <a href="javascript:;" @click="queryDetail(record.id,record.name)">整理榜单</a>

          <a-divider type="vertical" />
                <a href="javascript:;" @click="handleEdit(record)">编辑</a>

          <a-divider type="vertical" />

          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
          </a-popconfirm>


        </span>
      </a-table>
    </div>
    <!-- table区域-end -->

    <top-list-modal ref="modalForm" @ok="modalFormOk"></top-list-modal>
    <detail-songs-model v-if="detailVisible" ref="toplistSongs"></detail-songs-model>
  </a-card>
</template>

<script>
  import moment from 'moment'
  import pick from 'lodash.pick'
  import {frozenBatch2} from '@/api/api'
  import JThirdAppButton from '@/components/jeecgbiz/thirdApp/JThirdAppButton'
  import JDictSelectTag from '@/components/dict/JDictSelectTag'
  import {putAction,getFileAccessHttpUrl} from '@/api/manage';
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import JInput from '@/components/jeecg/JInput'
  import TopListModal from './Model/TopListModal'
  import DetailSongsModel from './Model/DetailSongsModel'
  export default {
    name: 'AllTopList',
    mixins: [JeecgListMixin],
    components: {
      JThirdAppButton,
      JDictSelectTag,
      JInput,
      TopListModal,
      DetailSongsModel
    },
    data() {
      return {
        detailVisible: false,
        description: '这是歌曲管理页面',
        queryParam: {},
        title: '',
        src: "",
        // 是否静音
        isMuted: false,
        visibleAudio: false,
        recycleBinVisible: false,
        url: {
          list: "/mus/toplist/list",
          delete: "/mus/toplist/delete",
          deleteBatch: "/mus/toplist/deleteBatch",
        },
        columns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:50,
            align:"center",
            fixed: 'left',
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title: '封面',
            align: "center",
            width: '10%',
            dataIndex: 'avatar',
            scopedSlots: {customRender: "avatarslot"}
          },
          {
            title: '榜单名称',
            align: "left",
            dataIndex: 'name',
            width: '15%',
            ellipsis: true,
          },
          {
            title: '所属分类',
            align: "left",
            width: '15%',
            dataIndex: 'toplistType_dictText',
            ellipsis: true,
          },
          {
            title: '更新规则',
            align: "left",
            dataIndex: 'updateFrequency',
            width: '15%',
            ellipsis: true,
          },
          {
            title: '简介',
            align: "center",
            dataIndex: 'description',
            width: '20%',
            ellipsis: true,
          },
          {
            title: '播放量',
            align: "center",
            dataIndex: 'playCount',
            width: '10%',
            ellipsis: true,
          },
          {
            title: '排序',
            align: "center",
            dataIndex: 'sort',
            width: '10%',
            ellipsis: true,
          },
          {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: {customRender: 'action'},
            align: "center",
            width: 250,
            fixed: 'right'
          }

        ],
      }
    },
    methods: {
      getAvatarView: function(avatar) {
        return getFileAccessHttpUrl(avatar)
      },
      queryDetail(toplistId,name){
        this.detailVisible = true;
        this.$nextTick(() => {
          this.$refs.toplistSongs.loadData(toplistId,name);
        });
      },
      //播放
      //音频暂停
      // 确定
      handleOk() {
        this.close()
      },
      // 关闭
      handleCancel() {
        this.close()
      },
      close() {
        this.visibleAudio = false;
      }
    }
  }
</script>

<style scoped>
  @import '~@assets/less/common.less';
</style>